<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/cax@latest/dist/cax.js"></script>
    <script src="./draw.js"></script>
</head>
<body>
<p>这是一个cax库的使用示例</p>
<canvas id="myCanvas" style="width: 375px;height: 500px;"></canvas>
<img style="width: 375px;" id="previewBlock" src="./psb.png">

</body>
<script>
    const scale = 3;
    const stage = new cax.Stage(
        375*scale,
        500*scale,
        "#myCanvas",
    );
    stage.scale = scale;

    const rect = new cax.Rect(100, 100, {
        fillStyle: "black"
    });

    rect.originX = 50;
    rect.originY = 50;
    rect.x = 100;
    rect.y = 100;
    rect.rotation = 30;

    rect.on("touchstart", () => {
        console.log("rect touchstart");
    });

    rect.on("touchmove", () => {
        console.log("rect touchmove");
    });

    rect.on("touchend", () => {
        console.log("rect touchend");
    });

    const getImg = () => {
        const ctx = document.querySelectorAll('#myCanvas')[0];
        console.log(ctx);
        document.querySelectorAll('#previewBlock')[0].src = ctx.toDataURL('img/jpeg');
    };

    rect.on("tap", () => {
        getImg();
    });

    stage.add(rect);

    const button = new cax.Button({
        width: 100,
        height: 40,
        text: "I am button!"
    });
    button.y = 170;
    button.x = 20;
    stage.add(button);
    const bitmap = new cax.Bitmap("./wx.png");

    bitmap.on("tap", () => {
        console.log("bitmap tap");
    });

    stage.add(bitmap);

    const sprite = new cax.Sprite({
        framerate: 7,
        imgs: [
            "./psb.png"
        ],
        frames: [
            // x, y, width, height, originX, originY ,imageIndex
            [0, 0, 32, 32],
            [32, 0, 32, 32],
            [32 * 2, 0, 32, 32],
            [32 * 3, 0, 32, 32],
            [32 * 4, 0, 32, 32],
            [32 * 5, 0, 32, 32],
            [32 * 6, 0, 32, 32],
            [32 * 7, 0, 32, 32],
            [32 * 8, 0, 32, 32],
            [32 * 9, 0, 32, 32],
            [32 * 10, 0, 32, 32],
            [32 * 11, 0, 32, 32],
            [32 * 12, 0, 32, 32],
            [32 * 13, 0, 32, 32],
            [32 * 14, 0, 32, 32]
        ],
        animations: {
            walk: {
                frames: [0, 1]
            },
            happy: {
                frames: [11, 12, 13, 14]
            },
            win: {
                frames: [7, 8, 9, 10]
            }
        },
        currentAnimation: "walk",
        animationEnd: function() {}
    });

    sprite.x = 100;
    sprite.y = 100;
    stage.add(sprite);

    const textJson = {
        x: 20,
        y: 200,
        children: [
            {
                text: "雷猴啊类",
                color: "#00FF00",
                font: "bold 20px Arial"
            },
            {
                text: "丢雷楼某啊",
                color: "red",
                font: "34px Arial",
                marginLeft: 10,
                marginTop: 5,
                rotation: 30
            }
        ]
    };

    const textGroup = drawText(cax, textJson);
    stage.add(textGroup);

    setInterval(() => {
        rect.rotation++;
        stage.update();
    }, 16);

    stage.update();
    // getImg();
    setInterval(() => {
        getImg();
    }, 1000);
</script>
</html>
